<template>
	<view class="flex flex-wrap">
		<view v-for="(item,index) in imageList" :key="index"
			class="flex align-center justify-center pt-2 position-relative" style="width: 230rpx;">
			<image :src="item" @click="preview(item)" class="bg-light rounded" style="width: 210rpx; height:210rpx;">
			</image>
			<view class="flex align-center justify-center rounded-circle"
				style="width: 40rpx; height: 40rpx; position: absolute;top:10rpx;right: 0; background-color:rgba(0, 0, 0,0.5);"
				@click="deleteImage(item)">
				<text class="iconfont text-white font-small">&#xe620</text>
			</view>
		</view>
		<view v-if="imageList.length < 9" class="flex align-center justify-center" style="width: 230rpx;"
			@click="chooseImage">
			<view class="flex align-center justify-center bg-light rounded" style="width: 210rpx; height:210rpx;">
				<text class="text-light-muted" style="font-size: 100rpx;">+</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				imageList: []
			}
		},
		mounted() {
			this.imageList = this.data
		},
		methods: {
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 9 - this.imageList.length,
					sizeType: ['compressed'],
					success: (res) => {
						// 上传
						this.imageList = [...this.imageList, ...res.tempFilePaths]
						this.$emit('updata', this.imageList)
					}
				})
			},
			// 预览图片
			preview(item) {
				uni.previewImage({
					current: item,
					urls: this.imageList
				})
			},
			// 删除图片
			deleteImage(item) {
				uni.showModal({
					content: '是否要删除该图片',
					success: (res) => {
						if (res.confirm) {
							let index = this.imageList.findIndex(url = url === item)
							if (index !== -1) {
								this.imageList.splice(index, 1)
								this.$emit('updata', this.imageList)
							}
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>
